<template>
    <div class="main">
    

      
        <!-- 二级路由插座 -->
        <div>
            <router-view></router-view>

        </div>
     
        <!-- 这个是底部导航栏 -->
       
        <van-tabbar v-model="activeIndex" active-color="#ee0a24" route>
            <van-tabbar-item v-for="(item,index) in fooleNavdata" :key="index" :to="{name:item.name}"   >
                <span>{{item.title}}</span>
                <template #icon="props">
                <img :src="props.active ? item.activeIcon : item.inactiveIcon" />
                </template>
            </van-tabbar-item>
        </van-tabbar>

    </div>
</template>

<script>
    export default {
        name:"Main",
        data() {
            return {
                activeIndex:0,

                // 导航数据
                fooleNavdata:[
                    {
                        title:"首页",
                        activeIcon: require("../assets/shouyeh.png"),
                        inactiveIcon: require("../assets/shouye.png"),
                        name:"Home",
                    },
                    {
                        title:"分类",
                        activeIcon: require("../assets/fenleih.png"),
                        inactiveIcon: require("../assets/fenlei.png"),
                        name:"Category",
                    },
                    {
                        title:"生活管",
                        activeIcon:"",
                        inactiveIcon:"",
                        name:"Living",
                    },
                    {
                        title:"购物车",
                        activeIcon: require("../assets/gouwucheh.png"),
                        inactiveIcon: require("../assets/gouwuche.png"),
                        name:"Shoppingson",
                    },
                    {
                        title:"我的",
                        activeIcon: require("../assets/wodeh.png"),
                        inactiveIcon: require("../assets/wode.png"),
                        name:"My",
                    },
                ]
            }
        },

        methods:{

            clickShopping(){
                this.$router.push({name:"Shoppingson"})
            },
            //我的

        }


    }
</script>

<style lang="scss" scoped>


</style>